<template>
	<div class="first">
		<div class="main">
			<Header :title="title"></Header>
		</div>
		<div class="body">
			<div class="banxin">
				<el-row>
					<el-col :span="24">
						<!-- 用户信息 -->
						<div class="box userInfo">
							<userInfo></userInfo>
						</div>
					</el-col>
				</el-row>
				<el-row :gutter="10">
					<el-col :span="12">
						<div class="box todo">
							<panding></panding></div
					></el-col>
					<el-col :span="12">
						<div class="box kmenu">
							<kmenu></kmenu></div
					></el-col>
				</el-row>
				<el-row>
					<el-col :span="24">
						<!-- 数据汇总 -->
						<div class="box data">
							<dataTotal></dataTotal>
						</div>
					</el-col>
				</el-row>
				<el-row :gutter="10">
					<!-- 采购 -->
					<el-col :span="12"
						><div class="box purchase"><Echarts1 /></div
					></el-col>
					<!-- 退款 -->
					<el-col :span="12"
						><div class="box refund"><Echarts2 /></div
					></el-col>
				</el-row>
				<el-row>
					<el-col :span="24">
						<!-- 订单统计 -->
						<div class="box order"><Echarts3 /></div>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="24">
						<!-- 销售金额统计-->
						<div class="box sale"><Echarts4 /></div>
					</el-col>
				</el-row>
			</div>
		</div>
	</div>
</template>
<script>
import Header from "@/components/goods/header"
import panding from "@/components/pending"
import userInfo from "@/components/userInfo"
import kmenu from "@/components/kmenu"
import dataTotal from "@/components/dataTotal"
import Echarts1 from "@/components/echarts/echarts1"
import Echarts2 from "@/components/echarts/echarts2"
import Echarts3 from "@/components/echarts/echarts3"
import Echarts4 from "@/components/echarts/echarts4"
export default {
	data() {
		return {
			title: "首页",
		}
	},
	components: {
		Header,
		panding,
		userInfo,
		kmenu,
		dataTotal,
		Echarts1,
		Echarts2,
		Echarts3,
		Echarts4,
	},
}
</script>
<style lang="scss" scoped>
.first {
	width: 100%;
	.body {
		width: 100%;
		margin: 10px 0 0 0;
		.banxin {
			width: 1100px;
			margin: 0 auto;
			background-color: #fff;
			padding: 10px 20px;
			box-sizing: border-box;
			.el-row {
				margin-bottom: 10px;
				&:last-child {
					margin-bottom: 0;
				}
			}
			.el-col {
				.box {
					border: 1px solid #e4e4e4;
				}
				.userInfo {
					width: 100%;
					height: 100px;
				}
				.todo,
				.kmenu {
					height: 185px;
				}
				.data {
					height: 245px;
				}
				.purchase,
				.refund {
					height: 300px;
				}
				.order,
				.sale {
					height: 420px;
				}
			}
		}
	}
}
</style>
